<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>创意精灵</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" href="../css/style.css" />
	<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
	<div class="business-bridge-iframe">
        <iframe src="../floating/floating.html" width="230px" frameborder="0" height="210px" style=";border-top-left-radius: 5px;border-top-right-radius: 5px;"></iframe>
        <img src="../img/off_white.png" class="off-white js-off-white">
        <div class="shrink-button js-shrink-button">
            <span class="control">收起</span>
        </div>
    </div>
	<div class="warp p-b45">
		<div class="nav_box">
            <div id="wrap">
                <div id="topBar">
                    <div class="nav clearfix" id="nav">
                        <div class="topBar">
                            <div class="nav_cont clearfix">
                                <a href="http://http://www.semyes.cn/index.php/Home/Index/index.html" class="nav_Logo"> <img src="../img/logo.png" /></a>
                                <ul class="nav_list clearfix">
                                    <li class="nav_list_li">
                                        <a class="" href="http://www.semyes.cn/index.php/Home/Index/index.html" target="_self">首页</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a class="" href="http://www.semyes.cn/index.php/Home/Yishubao/index.html" target="_self">易数宝</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Fwxm/index.html" target="" class="">服务项目</a>
                                        <ul class="subnav">
                                            <li>
                                                <a href="http://www.semyes.cn/index.php/Home/Fwxm/sem.html" target="_self">SEM</a>
                                            </li>
                                            <p class="subnav_Tri"></p>
                                            <li>
                                                <a href="http://moban.semyes.cn" target="_self">网站建设</a>
                                            </li>
                                    
                                            <p class="subnav_Tri"></p>
                                    <li ><a href="http://www.semyes.cn/index.php/Home/Fwxm/extension.html"  target="_self">信息流广告</a></li><p class="subnav_Tri"></p>
                                        </ul>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Project/index.html" target="_self">成功案例</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="join.semyes.cn" target="_self" class="active">招商加盟</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Contact/index.html" target="_self" class="">联系我们</a>
                                    </li>
                                    <li class="nav_list_li">
                                        <a href="http://www.semyes.cn/index.php/Home/Auto/introduce.html" target="_self" class="">关于我们</a>
                                        <ul class="subnav">
                                            <li>
                                                <a href="http://www.semyes.cn/index.php/Home/Auto/introduce.html" target="_self">原昇介绍</a>
                                            </li>
                                            <p class="subnav_Tri"></p>
                                            <li>
                                                <a href="http://www.semyes.cn/index.php/Home/Auto/culture.html" target="_self">原昇文化</a>
                                            </li>
                                            <p class="subnav_Tri"></p>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<div class="clear"></div>
        <div class="top-creativity">
            <div class="top-creativity-middle clear-float">
                <div class="top-creativity-middle-left fl">原力创意</div>
                <div class="top-creativity-middle-right fr">
                    <img src="../img/idea.png">
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="content-bg ba-100 p-b80">

			<div class="am-g cw-topbar">

				<div class="content">
					<div class="select-element">
						<span>当前单元</span>
						<select class="js-select select">
	                        <option class="select-lucency">行业</option>
	                        <option class="select-lucency">计划1</option>
	                        <option class="select-lucency">计划2</option>
	                        <option class="select-lucency">计划3</option>
	                        <option class="select-lucency">计划4</option>
	                    </select>
	                </div>
					<div class="fr current_element">
						<button class="return_index js-return-index"><img src="../img/return.png" class="return-index">返回首页</button>
						<button class="save_my_creative js-save"><img src="../img/save_white.png" class="save-index">保存创意</button>
					</div>
				</div>
			</div>

			<div class="content clear-float">
				<div class="am-u-lg-7 fl">
					<h3>
						<span class="candidate">候选创意</span><small class="candidate_explain">在左侧选择符合您的创意，点击编辑在右侧编辑。</small>
					</h3>
					<ul class="list_ul list_ul-height">
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影响力 e.baidu.com 2017-09 - 54条评价  百度专业推广顾问稍后回访您！ 咨询服务: 请给我回电话 请给我回电话 信息流怎么做 怎么提升推广效果 百度推广多少钱 怎么提升品牌效益 如何拓展新客户 您的称呼: 联系方式: 立即咨询 查看更多详情>></div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com</div>
							<div class="operation_button">
								<button class="compile_creative js-compile-text"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影响力 e.baidu.com 2017-09 - 54条评价  百度专业推广顾问稍后回访您！ 咨询服务: 请给我回电话 请给我回电话 信息流怎么做 怎么提升推广效果 百度推广多少钱 怎么提升品牌效益 如何拓展新客户 您的称呼: 联系方式: 立即咨询 查看更多详情>></div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com</div>
							<div class="operation_button">
								<button class="compile_creative js-compile-text"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影响力 e.baidu.com 2017-09 - 54条评价  百度专业推广顾问稍后回访您！ 咨询服务: 请给我回电话 请给我回电话 信息流怎么做 怎么提升推广效果 百度推广多少钱 怎么提升品牌效益 如何拓展新客户 您的称呼: 联系方式: 立即咨询 查看更多详情>></div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com</div>
							<div class="operation_button">
								<button class="compile_creative js-compile-text"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影响力 e.baidu.com 2017-09 - 54条评价  百度专业推广顾问稍后回访您！ 咨询服务: 请给我回电话 请给我回电话 信息流怎么做 怎么提升推广效果 百度推广多少钱 怎么提升品牌效益 如何拓展新客户 您的称呼: 联系方式: 立即咨询 查看更多详情>></div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com</div>
							<div class="operation_button">
								<button class="compile_creative js-compile-text"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影响力 e.baidu.com 2017-09 - 54条评价  百度专业推广顾问稍后回访您！ 咨询服务: 请给我回电话 请给我回电话 信息流怎么做 怎么提升推广效果 百度推广多少钱 怎么提升品牌效益 如何拓展新客户 您的称呼: 联系方式: 立即咨询 查看更多详情>></div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com</div>
							<div class="operation_button">
								<button class="compile_creative"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影</div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com12323</div>
							<div class="operation_button">
								<button class="compile_creative js-compile-text"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影</div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com12323</div>
							<div class="operation_button">
								<button class="compile_creative js-compile-text"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
						<li class="list_message">
							<div class="cw-c-hd">想了解怎么优化网站_首选百度_专业搜索引擎</div>
							<div class="candidate_content">怎么优化网站-来百度,覆盖95%网民,成为近60万家中国企业开展营销推广的信赖选择!比传统营销方式更精准,更灵活,为您带来更多潜在客户,快速提升企业销售额和品牌影</div>
							<div class="show-url">e.baidu.com</div>
							<div class="visit-url">e.baidu.com12323</div>
							<div class="operation_button">
								<button class="compile_creative js-compile-text"><img src="../img/compile.png" class="compile_ico">编辑</button>
								<button class="compile_creative del_creative"><img src="../img/delgray.png" class="compile_ico">删除</button>
							</div>
						</li>
					</ul>
				</div>
				<div class="am-u-lg-5 fr">
					<h3>
						<span class="candidate">创意编辑</span>
					</h3>
					<div class="am-panel-bd">
						<div class="am-text-sm">推荐词根: <span>无可推荐词根。</span></div>
						<div class="am-text-sm interposition">插入通配符: <small class="am-text-intro">使用单元最长关键词，保证创意不被截断。</small></div>
						<div class="am-btn am-btn-primary">{sem托管哪家好}</div>
						<hr>
						<div class="select-element">
							<span>创意单元</span>
							<select class="js-select select">
		                        <option class="select-lucency">行业</option>
		                        <option class="select-lucency">计划1</option>
		                        <option class="select-lucency">计划2</option>
		                        <option class="select-lucency">计划3</option>
		                        <option class="select-lucency">计划4</option>
		                    </select>
		                </div>
		                <div class="clear"></div>
						<hr>
						<form class="forms_content">
							<div class="forms_title">
								<label>标题</label>
								<span class="title-span"><span class="content-number js-number-title">0</span>/40</span>
								<input type="text" placeholder="不超过20个汉字" class="am-input-sm js-title" maxlength="40">
							</div>
							<div class="forms_title">
								<label>描述1 </label>
								<span class="title-span"><span class="content-number js-content-one-munber">0</span>/80</span>
								<textarea placeholder="描述一" maxlength="80" class="js-content-one"></textarea>
							</div>
							<div class="forms_title">
								<label>描述2 </label>
								<span class="title-span"><span class="content-number js-content-two-munberber">0</span>/80</span>
								<textarea placeholder="描述二" maxlength="80" class="js-content-tow"></textarea>
							</div>
							<div class="forms_title">
								<label>显示网址 </label>
								<span class="title-span"><span class="content-number js-show-url-munber">0</span>/36</span>
								<input type="url" placeholder="显示网址" class="am-input-sm js-content-url" maxlength="36">
							</div>
							<div class="forms_title">
								<label>访问网址</label>
								<span class="title-span"><span class="content-number js-content-three">0</span>/1024</span>
								<input type="url" placeholder="访问网址" class="am-input-sm js-content-visit" maxlength="1024">
							</div>
						</form>
						<div class="am-btn am-btn-primary save js-save-button">保存</div>
						<div class="am-btn am-btn-primary save preview js-previev">预览</div>
						<div class="am-btn am-btn-primary save preview fr">上传至百度</div>
					</div>
				</div>

			</div>
		</div>
		
		<iframe src="../footer/footer.html" height="46px" width="100%" frameborder="0" style="position: absolute;bottom: 0"></iframe>
	</div>
	<!-- 编辑 -->
	<div class="compile_window compile_window_off js-open">
		<div class="compile_warp">
			<img src="../img/delgray.png" class="delgrayImg js-delgrayImg">
			<div class="compile_creative_title">预览创意</div>
			<div class="compile_creative_title_content preview-bg">
				<div class="preview-content">
					<div class="cw-c-hd"></div>
					<div class="candidate_content"></div>
					<div class="content-url"></div>
					<div class="visit-url"></div>
				</div>

			</div>
		</div>
	</div>
	<!-- loding -->
	<div class="fied">
        <img src="../img/load.gif">
        <div class="calculate-middle">正在计算中</div>
    </div>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//返回首页
	$(".js-return-index").click(function(){
		window.location.href='../inedx.html';
	})

    $(".del_creative").click(function(){
    	if (confirm("确定要删除这条创意吗？")) {  
            $(this).parents(".list_message").remove();
        }
    })
    $(".js-save").click(function(){
    	window.location.href='save_creative.html';
    })
    // 监听inoput输入数量
	$(".js-title").on("input",function(){
		var lenghtVal = $(this).val().length;
		var priceVal = $(this).parent().find(".title-span").find(".content-number").text().length;
		
		var newLengtVal = lenghtVal + priceVal;
		if(newLengtVal > 40){
			alert("sdasd");
		} else {
			$(this).parent().find(".title-span").find(".content-number").text(newLengtVal);
		}
	})

	$(".js-content-one").on("input",function(){
		var lenghtVal = $(this).val().length;
		var priceVal = $(this).parent().find(".title-span").find(".content-number").text().length;
		var newLengtVal = lenghtVal + priceVal;
		if(newLengtVal > 80){
			alert("sdasd");
		} else {
			$(this).parent().find(".title-span").find(".content-number").text(newLengtVal);
		}
	})

	$(".js-content-tow").on("input",function(){
		var lenghtVal = $(this).val().length;
		var priceVal = $(this).parent().find(".title-span").find(".content-number").text().length;
		var newLengtVal = lenghtVal + priceVal;
		if(newLengtVal > 80){
			alert("sdasd");
		} else {
			$(this).parent().find(".title-span").find(".content-number").text(newLengtVal);
		}
	})
 
	$(".js-content-url").on("input",function(){
		var lenghtVal = $(this).val().length;
		var priceVal = $(this).parent().find(".title-span").find(".content-number").text().length;
		var newLengtVal = lenghtVal + priceVal;
		if(newLengtVal > 36){
			alert("sdasd");
		} else {
			$(this).parent().find(".title-span").find(".content-number").text(newLengtVal);
		}
	})
	$(".js-content-visit").on("input",function(){
		var lenghtVal = $(this).val().length;
		var priceVal = $(this).parent().find(".title-span").find(".content-number").text().length;
		var newLengtVal = lenghtVal + priceVal;
		if(newLengtVal > 1024){
			alert("sdasd");
		} else {
			$(this).parent().find(".title-span").find(".content-number").text(newLengtVal);
		}
	})
	// 编辑文本
	$(".js-compile-text").click(function(){
		// 标题
		var textVal = $(this).parent().parent().find(".cw-c-hd").text();
		// 标题长度
		var compileLenght  = $(this).parent().parent().find(".cw-c-hd").text().length;
		$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-title").val(textVal);
		$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-number-title").text(compileLenght);
		// 描述1 
		var candidateContentVal = $(this).parent().parent().find(".candidate_content").text();

		if(candidateContentVal.length > 80){
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-one").text(candidateContentVal.substring(0,80));
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-one-munber").text(candidateContentVal.substring(0,80).length);
			// 描述2
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-tow").text(candidateContentVal.substring(80,160));

			var describeTwo;
			for (var i = 0; i < candidateContentVal.length; i++) {
				describeTwo = candidateContentVal.length - 80;
			}
			if (describeTwo > 80) {
				$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-two-munberber").text(80);
			} else {
				$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-two-munberber").text(describeTwo);
			}
		} else {
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-one").text(candidateContentVal);
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-one-munber").text(candidateContentVal.length);
		}

		// 显示网址
		var showUrl = $(this).parent().parent().find(".show-url").text();
		$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-url").val(showUrl);
		if (showUrl.length > 36) {
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-show-url-munber").text(36);
		} else {
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-show-url-munber").text(showUrl.length);
		}
		// 访问网址
		var visitUrl = $(this).parent().parent().find(".visit-url").text();
		$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-visit").val(visitUrl);
		if (visitUrl.length > 1024) {
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-three").text(1024);
		} else {
			$(this).parents(".am-u-lg-7").siblings(".am-u-lg-5").find(".js-content-three").text(visitUrl.length);
		}
	})

	// 预览
	$(".js-previev").click(function(){
		$(".js-open").show();
		var title = $(this).parent(".am-panel-bd").find(".js-title").val();
		var content1 = $(this).parent(".am-panel-bd").find(".js-content-one").val();
		var content2 = $(this).parent(".am-panel-bd").find(".js-content-tow").val();
		var showUrl = $(this).parent(".am-panel-bd").find(".js-content-url").val();
		var visitUrl = $(this).parent(".js-content-visit").find(".js-content-url").val();
		$(".js-open").find(".cw-c-hd").text(title);
		$(".js-open").find(".candidate_content").text(content1 + content2);
		$(".js-open").find(".content-url").text(showUrl);
		$(".js-open").find(".visit-url").text(visitUrl);
	})

	// 关闭
	$(".js-delgrayImg").click(function(){
		$(".js-open").hide();
	})

	// 保存按钮
	$(".js-save-button").click(function(){
		$(".fied").show();
        setInterval(function(){
            window.location.href='save_creative.html'
        },2000)
	})
	//收缩服务
    $(".js-shrink-button").toggle(function(){
        $(".business-bridge-iframe").animate({
            left:"-230px",
        },1000)
        $(this).find("span").removeClass("control").text("服务指导");
    },function(){
        $(".business-bridge-iframe").animate({
            left:"0px",
        },1000)
        $(this).find("span").addClass("control").text("收起");
    })
    // 关闭浮窗
    $(".js-off-white").click(function(){
        $(".business-bridge-iframe").hide();
    })
})
</script>
</html>